{% extends "admin/base.html" %}

{% block title %}网站配置{% endblock %}

{% block page_title %}网站配置{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h2>基本设置</h2>
    </div>
    <div class="card-body">
        {% if success %}
        <div class="alert alert-success">
            {{ success }}
        </div>
        {% endif %}
        
        <form id="config-form" method="post" action="/admin/website-config/update">
            <div class="form-group">
                <label for="site_name">网站名称 <span style="color: #e74c3c;">*</span></label>
                <input type="text" id="site_name" name="site_name" value="{{ config.site_name }}" required>
            </div>
            
            <div class="form-group">
                <label for="site_description">网站简介</label>
                <input type="text" id="site_description" name="site_description" value="{{ config.site_description }}">
            </div>
            
            <div class="form-group">
                <label for="personal_intro">个人介绍</label>
                <textarea id="personal_intro" name="personal_intro" rows="6">{{ config.personal_intro }}</textarea>
            </div>
            
            <div class="form-group">
                <label for="icp_record">网站备案号</label>
                <input type="text" id="icp_record" name="icp_record" value="{{ config.icp_record }}">
            </div>
            
            <div class="form-group">
                <label for="copyright_info">版权信息</label>
                <input type="text" id="copyright_info" name="copyright_info" value="{{ config.copyright_info }}">
            </div>
            
            <div class="form-group">
            <label for="background_effect">背景动效</label>
            <select id="background_effect" name="background_effect" class="form-control">
                <option value="none" {% if config.background_effect == 'none' %}selected{% endif %}>无</option>
                <option value="snow" {% if config.background_effect == 'snow' %}selected{% endif %}>雪花动效</option>
                <option value="particles" {% if config.background_effect == 'particles' %}selected{% endif %}>粒子动效</option>
                <option value="circles" {% if config.background_effect == 'circles' %}selected{% endif %}>圆形动效</option>
                <option value="gradient" {% if config.background_effect == 'gradient' %}selected{% endif %}>渐变流动效果</option>
                <option value="starry-sky" {% if config.background_effect == 'starry-sky' %}selected{% endif %}>星空动效</option>
                <option value="custom-image" {% if config.background_effect == 'custom-image' %}selected{% endif %}>自定义图片</option>
            </select>
        </div>
        
        <!-- 自定义背景图片上传 -->
        <div id="custom-image-upload" class="form-group" style="display: none;">
            <label for="background_image">上传背景图片</label>
            <input type="file" id="background_image" name="background_image" accept="image/*" class="form-control-file">
            <small class="form-text text-muted">推荐尺寸：1920x1080，支持JPG、PNG、WEBP格式</small>
            
            <!-- 图片预览区域 - 16:9格式 -->
            <div id="image-preview-container" class="form-group" style="margin-top: 20px; display: none;">
                <label>预览效果 (16:9)</label>
                <div class="preview-wrapper" style="position: relative; width: 100%;">
                    <!-- 使用padding-top: 56.25%实现16:9比例 -->
                    <div class="image-preview" style="position: relative; width: 100%; padding-top: 56.25%; background-color: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; overflow: hidden;">
                        <img id="image-preview" src="" alt="预览图片" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;">
                        <div id="preview-overlay" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.3); pointer-events: none;"></div>
                    </div>
                </div>
            </div>
        </div>
        

        
        <script>
        // 处理背景动效选择变化
        document.getElementById('background_effect').addEventListener('change', function() {
            const customImageUpload = document.getElementById('custom-image-upload');
            const loveVideoUpload = document.getElementById('love-video-upload');
            
            if (this.value === 'custom-image') {
                customImageUpload.style.display = 'block';
                loveVideoUpload.style.display = 'none';
            } else if (this.value === 'love-video') {
                customImageUpload.style.display = 'none';
                loveVideoUpload.style.display = 'block';
            } else {
                customImageUpload.style.display = 'none';
                loveVideoUpload.style.display = 'none';
            }
        });
        
        // 初始化显示状态
        document.addEventListener('DOMContentLoaded', function() {
            const backgroundEffect = document.getElementById('background_effect');
            const customImageUpload = document.getElementById('custom-image-upload');
            
            if (backgroundEffect.value === 'custom-image') {
                customImageUpload.style.display = 'block';
            }
            
            // 添加图片文件上传预览功能
            const imageInput = document.getElementById('background_image');
            const imagePreviewContainer = document.getElementById('image-preview-container');
            const previewImage = document.getElementById('image-preview');
            const previewOverlay = document.getElementById('preview-overlay');
            
            // 监听图片文件选择变化
            imageInput.addEventListener('change', function(e) {
                if (e.target.files && e.target.files[0]) {
                    const reader = new FileReader();
                    
                    reader.onload = function(e) {
                        // 设置图片源并显示预览容器
                        previewImage.src = e.target.result;
                        imagePreviewContainer.style.display = 'block';
                    }
                    
                    reader.readAsDataURL(e.target.files[0]);
                } else {
                    // 重置预览状态
                    imagePreviewContainer.style.display = 'none';
                    previewImage.src = '';
                }
            });
            
            // 检查是否有当前背景图片并显示预览容器
            const currentBackgroundUrl = '{{ current_background_image|default("") }}';
            if (currentBackgroundUrl && backgroundEffect.value === 'custom-image') {
                previewImage.src = currentBackgroundUrl;
                imagePreviewContainer.style.display = 'block';
            }
        });
        </script>
            
            <div style="margin-top: 30px;">
                <button type="submit" class="btn btn-primary">保存设置</button>
            </div>
        </form>
    </div>
</div>

<!-- 数据库操作部分 -->
<div class="card" style="margin-top: 30px;">
    <div class="card-header">
        <h2>数据库管理</h2>
    </div>
    <div class="card-body">
        <!-- 数据库备份提示信息 -->
        <div class="alert alert-info" style="margin-bottom: 20px;">
            <strong>备份提示：</strong>
            <ul>
                <li>所有备份文件使用UTF-8编码格式保存，确保数据完整性</li>
                <li>建议定期备份数据库，避免意外情况导致数据丢失</li>
                <li>备份文件可通过下载功能保存到本地，便于数据迁移</li>
            </ul>
        </div>
        
        <!-- 自动备份设置 -->
        <div class="card mb-4 border-primary">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">自动备份设置</h5>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="auto_backup_enabled">
                        <label class="form-check-label" for="auto_backup_enabled">启用自动备份</label>
                    </div>
                </div>
                
                <div class="auto_backup_settings" style="display: none; margin-left: 20px;">
                    <div class="form-group">
                        <label for="backup_frequency">备份频率</label>
                        <select class="form-control" id="backup_frequency">
                            <option value="daily">每天</option>
                            <option value="weekly">每周</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="backup_time">备份时间（HH:MM）</label>
                        <input type="time" class="form-control" id="backup_time" value="00:00">
                    </div>
                    
                    <div class="form-group" id="weekday_group">
                        <label for="backup_weekday">备份星期</label>
                        <select class="form-control" id="backup_weekday">
                            <option value="0">星期日</option>
                            <option value="1">星期一</option>
                            <option value="2">星期二</option>
                            <option value="3">星期三</option>
                            <option value="4">星期四</option>
                            <option value="5">星期五</option>
                            <option value="6">星期六</option>
                        </select>
                    </div>
                    

                
                <div class="form-group">
                    <label for="backup_to_email" class="form-label">接收邮箱</label>
                    <input type="email" id="backup_to_email" class="form-control" placeholder="请输入接收备份的邮箱地址">
                </div>
                
                <div class="form-group">
                    <div class="form-check">
                        <input type="checkbox" class="form-check-input" id="backup_send_email">
                        <label class="form-check-label" for="backup_send_email">备份后发送邮件</label>
                    </div>
                </div>
                    
                    <div class="alert alert-warning" role="alert" id="email_warning">
                        <strong>注意：</strong> 请确保在配置文件中正确设置了邮件相关参数，包括SMTP服务器、用户名、密码等。
                    </div>
                    
                    <button type="button" class="btn btn-primary" id="save_backup_config">保存备份设置</button>
                    <button type="button" class="btn btn-secondary ml-2" id="test_backup_email">测试发送备份邮件</button>
                </div>
            </div>
        </div>
        <div class="form-group">
            <label>当前数据库路径</label>
            <input type="text" value="{{ db_path }}" readonly style="background-color: #f8f9fa; cursor: not-allowed;">
        </div>
        
        <div class="form-group">
            <label>备份文件列表</label>
            {% if all_backups %}
            <div class="backup-list">
                <table class="table table-striped" style="margin-top: 10px;">
                    <thead>
                        <tr>
                            <th>文件名</th>
                            <th>创建时间</th>
                            <th>文件大小</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for backup in all_backups %}
                        <tr>
                            <td>{{ backup.name }}</td>
                            <td>{{ backup.modified_time }}</td>
                            <td>{{ backup.size }}</td>
                            <td>
                                <a href="/admin/download-backup/{{ backup.name }}" class="btn btn-sm btn-secondary" style="margin-right: 5px;">下载</a>
                                <button class="btn btn-sm btn-danger delete-backup-btn" data-filename="{{ backup.name }}">删除</button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="alert alert-info" style="margin-top: 10px;">
                <p>暂无备份文件，请点击下方按钮创建备份</p>
            </div>
            {% endif %}
        </div>
        
        <div class="database-actions">
            <button id="backup-btn" class="btn btn-primary">一键备份数据库</button>
        </div>
    </div>
</div>

<!-- 引入网站配置相关脚本 -->
<script src="/static/js/admin/website-config.js"></script>
{% endblock %}